<template>
	<view class="page">
		<nav-bar title="会员卡" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view v-if="isLoading" class="common-loading">
			<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
		</view>
		<view class="card" v-else-if="typeList && typeList.length">
			<view class="" v-for="(item, index) in typeList" :key="index">
				<view class="card-item" v-if="getPrice(item)">
					<view class="left">
						<image class="img" :src="item.img" mode="aspectFill" />
						<text class="text">会员卡</text>
					</view>
					<view class="right">
						<view class="name">{{ item.ruleName }}</view>
						<view class="money">￥{{ item.price }}</view>
						<view class="time">有效期：{{ item.days }}天</view>
					</view>
					<view class="buy-btn" @click="clickBuy(item)">购买</view>
				</view>
			</view>
		</view>
		<view v-else class="common-no-data">
			<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
			<view class="text">暂无会员卡规则</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import api_membership from '@/api/membership'
	import pageConfig from '@/config'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				storeId: '',
				cardId: null,
				typeList: [],
				isLoading: false,
				params: {},
				cardItemId: null
			}
		},
		onLoad(options) {
			this.storeId = options.storeId
			if (options.id) {
				this.cardItemId = options.id
			}
			if (options.cardId) {
				this.cardId = options.cardId
			}
			this.params = {
				phoneNumber: options.phoneNumber,
				storeId: options.storeId
			}
			this.getTypeList()
		},
		methods: {
			//获取价钱比较大小
			getPrice(item) {
				const aa = this.typeList.find(el => el.id == this.cardItemId)
				if (aa) {
					if (Number(item.price) >= Number(aa.price)) {
						return true
					} else {
						return false
					}
				} else {
					return true
				}
			},
			getTypeList() {
				this.isLoading = true
				const params = {
					storeId: this.storeId
				}
				api_membership.fetchStoredType(params).then(res => {
					this.isLoading = false
					if (res.code !== 200) return
					res.data.map(item => {
						item.img = this.baseImgUrl + 'img_vip_bg.png'
					})
					this.typeList = res.data
				}).catch(err => {
					this.isLoading = false
				})
			},
			clickBuy(item) {
				this.params.ruleId = item.id
				api_membership.getMemberInfo(this.params).then(res => {
					console.log('res.data', res.data, item);
					const data = encodeURIComponent(JSON.stringify(res.data))
					if (res.data && res.data.id != null) {
						this.$tab.navigateTo(
							`/subPages/membership/membershipHandle?id=${item.id}&storeId=${this.storeId}&cardId=${this.cardId}&data=${data}`
						)
					} else {
						this.$tab.navigateTo(
							`/subPages/membership/membershipHandle?id=${item.id}&storeId=${this.storeId}`)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;

		.card {
			padding: 36rpx;

			.card-item {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid lightgrey;
				padding: 16rpx;

				.left {
					width: 301rpx;
					height: 148rpx;
					position: relative;

					.img {
						width: 301rpx;
						height: 148rpx;
					}

					.text {
						position: absolute;
						font-weight: 600;
						left: calc(50% - 45rpx);
						top: calc(50% - 15rpx);
					}
				}

				.right {
					flex: 1;
					margin-left: 24rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.money {
						margin: 10rpx 0;
						font-size: 28rpx;
						font-weight: bold;
					}

					.time {
						font-size: 24rpx;
						color: #666;
					}
				}

				.buy-btn {
					width: 104rpx;
					height: 50rpx;
					border-radius: 39rpx 39rpx 39rpx 39rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					background: linear-gradient(90deg, #EACEA7 0%, #DDB382 100%);
				}
			}
		}
	}
</style>